Webpack 是網頁的打包工具。當我們的網頁越寫越大，檔案越來越多（例如一個網站有好幾個.html檔案），甚至還有使用到框架。這時候我們可以使用 Webpack 來打包這些檔案，讓它們個只有一個檔案，比如說把好幾個.html檔案打包成只有一個.html檔，或者是把好幾個.js檔案打包成只有一個.js。
首先，學習 Webpack 最好的方式就是直接把環境架設起來，這裡蒐集一些課程和文件，對於幫助我們建立 Webpack 環境很有幫助，參考的資源如下。
先建立一個資料夾，裡面放兩個.js檔案，分別為 main.js 和 helper.js（名稱自己取），我們先將 main.js 當作 Webpack 的進入點，也就是說要讓所有的.js檔案都會和main.js都要產生關聯性，那麼要如何讓多個.js檔案可以被main.js給呼叫？這時候可使用import 和 export來解決【１】。
起手式，我們在 VS Code 中建立一個新的 Webpack 環境，在 webpack-demo 資料夾裡面再放入一個 src 資料夾，然後在 src 裡面加入三個檔案，檔案分別為：helper.js、main.js、index.html。可以參考下列的結構圖。
然後，在我們的檔案中，分別加入下面的語法來做測試。
JavaScript：（helper.js）
export default {
fn() {
console.log('Hello World');
},
};
JavaScript：（main.js ）
import helpers from './helper.js';
helpers.fn();
export 主要放在外部的 JavaScript Function，如同前面說過，main.js是進入點。所以，由上面的寫法能清楚明白：「外部的 helper.js 會匯入到 main.js 中，要注意這種用法只能在 JavaScript 中執行。在 Node.js 無法直接使用import 和 export」。
緊接著，我們要來安裝 webpack 套件，先在 VS Code 的終端機先切換到之前建立的 wepback 資料夾下。而在下安裝指令前，我們要先得到一個package.json來存放一些資訊，若是想要產生乾淨的package.json，只需使用如下指令即可。
關於 PowerShell 的指令其實跟 Linux 指令相同。像是切換資料夾使用
cd指令，查看當前目錄使用ls指令等等。
PowerShell：
npm init
這裡我們先不要設定任何資訊，所以只要直接按下鍵盤的 Enter 鍵先跳過資訊的輸入，這些資訊在之後都能夠去設定，所以不必太擔心。當資料夾產生之後可以輸入install webpack的指令，參考下列指令。
PowerShell：
npm install webpack webpack-cli --save-dev
顯示結果：
跑完install webpack後則會出現node_modules資料夾與package-lock.json檔案。
更新過後的package.json如下。
JSON：
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0"
}
}
npm install webpack webpack-cli --save-dev其中的--save-dev屬於開發者模式，你也可以寫成--save上線模式。這裡先不糾結使用哪一種，兩種都可以用。
這裡需要有一個入口起點（entry），暫時先借用文件中的webpack.config.js。
JavaScript：
const path = require('path');
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.bundle.js',
},
};
webpack.config.js請自行新增一個.js檔案，然後將檔案放在package.json相同的路徑下。
接著先打開package.json檔案，添加一條編譯 js 的規則。到時要編譯 webpack 時，只要用npm run build就能夠編譯，編譯完成後，webpack-demo資料夾內，會出現一個dist資料夾，裡面的檔案就是打包過後的檔案。
JSON：
"build":"webpack"
顯示結果：
build 的規則一定要寫上去啊！否則無法正常編譯。
PowerShell：
npm run build
最後編譯後的main.bundle.js後，可以得到類似下面的檔案。並且 Webpack 在編譯完成後會自帶 ugly 效果。也就是讓人不好辨識的寫法。也可以減少檔案的容量大小。
JavaScript：
(()=>{"use strict";({fn(){console.log("Hello World")}}).fn()})();
main.bundle.js這個 Filename 設定可以到webpack.config.js做修改。其實 Webpack 的相關設定都可以到webpack.config.js去新增或刪除。
node_modules 檔案一個都 MB 起跳，若是不想要把它存放在 GitHub 上，這時候可以建立一個.gitignore文件在專案的根目錄下，讓 node_modules 不被 Git 追蹤。
在.gitignore的文件中加入node_modules。
node_modules
如果根目錄找不到
.gitignore，你可以新增一個空白文字檔，直接把 .txt 文字檔改名為.gitignore.，值得注意的是，.gitignore這後面的點，是為了要忽視 Windows 的命名限制。
若想要刪除一整個 node_modules 資料夾，執行下列指令。
rm -rf node_modules package-lock.json
在dist資料夾中建立一個 index.html 檔案，然後將剛剛產生的ain.bundle.js 匯入到 HTML 檔案中。
HTML：
<script src="./main.bundle.js"></script>
我們將之前的 helper 和 main 檔案新增程式。
JavaScript：（helper.js）
export default {
fn() {
console.log('Hello World');
},
fn2() {
console.log('How are you?');
},
};
JavaScript：（main.js ）
import helpers from './helper.js';
helpers.fn();
helpers.fn2();
原本跑npm run build指令後所產生的main.bundle.js，其內容如下圖。
然後，我們剛剛又更動了 helper.js、main.js 的內容。最後，在執行一次 build 指令。
PowerShell：
npm run build
此時的main.bundle.js就會被更新，這時只要打開之前在 dist 資料夾中所建立的 index.html 檔案，確認內容是否已被更新。
其實，上面在做的事情，就只是把多個 .js 檔案，webpack 透過 run 指令將多個 .js 檔案編譯成一個 .js 檔案，也就是main.bundle.js。
除了 JavaScript 可以打包外，也可以加入其他的檔案，但是這裡會出現一個問題，那就是我們的 node.js 不會認識其他的檔案，所以要依靠 loader 來讓 Webpack 識別檔案，這裡先安裝 css loader 相關資源，指令如下。
PowerShell：
npm install --save-dev style-loader css-loader
指令打完會出現類似下列的訊息。
使用官網提供的語法。將它們加入到 webpack.config.js 裡面。
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
],
},
然後在專案的 src 資料夾裡面新增一個style.css，並且貼上下面的內容來更改背景顏色。
CSS：
body {
background: darkorchid;
}
這時，只要切回到main.js檔案，將剛剛建立的style.css匯入到裡面。
JavaScript：
import './style.css';
這裡寫清楚一點，在main.js加入下列這幾行語法。
JavaScript：
import helpers from './helper.js';
import './style.css';
helpers.fn();
helpers.fn2();
再次執行npm run build。
PowerShell：
npm run build
經過 webpack 編譯後的main.bundle.js，因為加入 CSS 相關東西，所以會產生一大串醜醜的語法，而在最後執行 HTML 檔案，將 body 的背景改成紫色。
顯示結果：
本篇寫的東西算是入門系列，Webpack 其實還有很多的用法，像是在 React 框架使用 Webpack，或是匯入各種不同檔案的 loader 寫法，這要等到需要用到時，再慢慢研究。對於初學者來說，推薦直接看教學影片，並且動手操作過一遍，會比一直讀資料還要來的有效果。而在世間花費上，影片雖然只有短短的 37 分鐘 ，但是要一步一步驟的紀錄操作方法，也是花好幾個小時，儘管這樣學習很費時，但是自己也寫了一套 Webpack 操作 SOP，投資的時間沒有白費。
iThome鐵人賽
看影片追技術